<template>
	<view class="filter-model">
		<view class="model-content" @click="showFuc">
			<view class="imgBox">
				<image src="@/static/images/index/selectA.png" mode="" v-if="selected && !mainPlan"></image>
				<image src="@/static/images/index/selectD.png" mode="" v-else></image>
			</view>
			<view class="model-content-title" :style="{ color: selected && !mainPlan ? '#0091ff' : '#333' }">{{ '筛选' }}

			</view>
		</view>
		<filter-drawer :chooseData="choosed" :filterList="filterList" :comfireText="comfireText" :show="showFilter"
			ref="filter-drawer" :keyMap="keyMap" @closed="handleClose" :nodeAll="false" @submit="submitFilter"
			@chooseTag="getResultCount"></filter-drawer>
	</view>
</template>

<script>
import filterDrawer from '@/components/filter-drawer/filter-drawer.vue';
import { getBuildingType, getBrand } from '@/apis/barrierSearch.js';
import { getRepairCount } from '@/apis/statistic.js';
export default {
	name: 'filter-model',
	components: { filterDrawer },
	props: {
		disabled: {
			type: Boolean,
			default: false
		},
		all: {
			type: Boolean,
			default: true
		},
		csd: {
			type: Object,
			default: () => {
				return {};
			}
		},
		date: {
			type: Object
		},
		userIds: {
			type: String
		},
		mainPlan:{// 保养月历计划页面
			type:Number,
			default:0
		},
		buildingId:{// 保养月历计划页面
			type: [String,Number],
			default: ''
		}
	},
	data() {
		return {
			filterList: [
				{
					title: '状态',
					key: 'planStatus',
					list: [{ name: '待开始', value: 1 }, { name: '进行中', value: 2 }, { name: '提交任务', value: 3 },
						{ name: '维保签字', value: 5 },
						{ name: '已完成', value: 4 }]
				},
				{ title: '及时性', key: 'timeliness', list: [{ name: '及时', value: 1 }, { name: '超时', value: 2 }] },
				{ title: '逾期情况', key: 'overdue', list: [{ name: '已逾期', value: 2 }, { name: '未逾期', value: 1 }] },
				{ title: '年审', key: 'useType', list: [{ name: '年审梯', value: 0 }, { name: '非年审梯', value: 1 }] },
				{ title: '任务时长', key: 'duration', list: [{ name: '任务时间过短', value: 2 }, { name: '任务时间过长', value: 1 }, { name: '正常', value: 3 }] },
				{
					title: '签到签退',
					key: 'sign',
					list: [{ name: '签到定位异常', value: 1 }, { name: '签退定位异常', value: 2 }, { name: '系统签退', value: 4 },
						{ name: '正常', value: 5 }
					]
				}
			],
			choosed: {},
			showFilter: false,
			allChecked: true,
			selected: false,
			chooseArr: [], // 搜索框展示的数组
			comfireText: '确定',
			keyMap: {}
		};
	},
	created() {
		this.setKeyMap(this.filterList);
		this.allChecked = this.all;
		this.choosed = this.csd;
		if (this.choosed) {
			this.selected = true;
		} else {
			this.selected = false;
		}
		this.setChooseArr();
	},
	computed: {
		showConditions() {
			let flag = false;
			flag = this.allChecked || Object.keys(this.choosed).length === 0 ? true : false;
			return flag;
		}
	},
	watch: {
		choosed: {
			handler: function (val) {
				this.choosed = val;
				console.log(val, this.choosed, 'testWacth');
			},
			deep: true
		}
	},
	methods: {
		getConditionsParams(arr) {
			let newList = [];
			arr.forEach(item => {
				let newName = newList.find(i => i.key == item.key);
				if (!newName) {
					newList.push({ key: item.key, value: [item.value] });
				} else {
					newName.value.push(item.value);
				}
			});
			console.log(newList);
			return newList;
		},
		// 非确定关闭
		handleClose() {
			// console.log('点击关闭')
			this.showFilter = false;
			// this.choosed={}
			// 重新赋值

			let obj = {};
			this.chooseArr.forEach(item => {
				if (obj[item.key]) {
					obj[item.key].push(item.value);
				} else {
					obj[item.key] = [];
					obj[item.key].push(item.value);
				}
			});
			this.choosed = obj;
			this.$refs['filter-drawer'].initData(obj);
		},
		showFuc() {
			if (this.disabled) {
				return;
			}
			this.showFilter = true;
			this.$refs['filter-drawer'].initData(this.choosed);
			this.handleCount({ allChecked: this.allChecked, choosed: this.choosed });
		},
		// 完成筛选
		filterd() {
			// console.log(this.choosed, 'his.choosed');
			this.$emit('filterd', {
				choosed: this.choosed,
				allChecked: this.allChecked
			});
		},
		// 保存筛选
		submitFilter(res) {
			console.log(res, 'eason');
			this.keyMap = res.keyMap;
			// console.log(this.keyMap, 222);
			// return
			this.allChecked = res.allChecked;
			this.choosed = res.choosed;
			var arr = Object.keys(res.choosed);
			if (arr.length) {
				this.selected = true;
			} else {
				this.selected = false;
			}
			this.showFilter = false;
			this.setChooseArr();
			this.filterd();
		},

		// 删除筛选item
		removeItem(item, index) {
			this.showFuc();
			return;
			// if (this.disabled) {
			// 	return;
			// }
			// this.chooseArr.splice(index, 1);
			// if (this.chooseArr.length == 0) {
			// 	this.choosed = {};
			// 	this.allChecked = true;
			// 	this.filterd();
			// 	return;
			// }
			// let choosed = JSON.parse(JSON.stringify(this.choosed));
			// let idx = choosed[item.key].indexOf(item.value);
			// choosed[item.key].splice(idx, 1);
			// this.choosed = choosed;
			// this.$refs['filter-drawer'].initData(choosed)
			// this.filterd();
		},

		// 渲染已选标签
		setChooseArr() {
			let filterList = this.filterList;
			if (this.allChecked) {
				this.chooseArr = [];
				return;
			}
			let arr = [];
			// console.log(this.choosed, 'setChooseArr');
			for (let key in this.choosed) {
				let obj = this.filterList.find((item, i) => {
					return item.key === key;
				});
				// console.log(obj, 'obj的值set的值');
				if (obj) {
					obj.list.forEach(e => {
						if (this.choosed[key].indexOf(e.value) != -1) {
							arr.push({
								...e,
								key
							});
						}
					});
				}
			}

			this.chooseArr = arr;
			// console.log(this.chooseArr, 'this.chooseArr');
		},
		setKeyMap(list) {
			const map = new Map();
			list.forEach(item => {
				map.set(item.key, { flag: false });
			});
			const obj = [...map.entries()].reduce((obj, [key, value]) => ((obj[key] = value), obj), {});

			this.keyMap = obj;
		},
		handleGetListLen(obj) {
			return new Promise((resolve, reject) => {
				getRepairCount(obj)
					.then(res => {
						if (res) {
							resolve(res.data);
						}
					})
					.catch(() => {
						resolve({});
					});
			});
		},
		// 接受tag改变以及重置的
		getResultCount(res) {
			this.handleCount(res);
		},
		// 获取点击筛选条件后的数量总数	
		async handleCount(res) {
			const { allChecked, choosed } = res;
			// console.log(allChecked, choosed);
			if (!allChecked && !Object.keys(choosed).length) {
				this.comfireText = '确定';
				return;
			}
			uni.showLoading({
				title: '数据加载中'
			});
			let params = {
				size: 10,
				current: 1,
				keyword: this.date.keyword,
				startTime: this.date.startTime,
				endTime: this.date.endTime,
				userIds: this.userIds,
				buildingId:this.buildingId,
			};
			let query = {};
			if (Object.keys(choosed).length || allChecked) {
				if (Object.keys(choosed).length) {
					const map = new Map();
					for (let key in choosed) {
						map.set(key, choosed[key]);
					}
					const obj = [...map.entries()].reduce((obj, [key, value]) => ((obj[key] = value.join(',')), obj), {});

					query = obj;
				}

				if (query.useType && query.useType.length > 2) {// 年审类型全选 删除年审字段等同全选
					delete query.useType;
				}

				let count = await this.handleGetListLen(Object.keys(choosed).length ? { ...query, ...params } : params);
				if (count) {
					uni.hideLoading();
				}
				if (count > 0) {
					this.comfireText = `查看${count}条数据`;
				} else {
					uni.showToast({
						icon: 'none',
						title: '筛选结果为空 请重新选择条件'
					});
					this.comfireText = '完成';
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.filter-model {
	width: 100%;

	.imgBox {
		display: flex;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.model-content {
		// width: calc(100% - 40rpx);
		// padding: 0 20rpx;
		display: flex;
		font-size: 26rpx;
		color: #333;
		// padding-bottom: 20rpx;
		align-items: center;
		justify-content: flex-end;

		&-title {
			display: flex;
			// font-weight: bold;
			letter-spacing: 1rpx;
			align-items: center;
			margin-right: 10rpx;

			image {
				width: 22rpx;
				height: 22rpx;
				transition: 0.3s all;
				margin: 4rpx 0rpx 0 7rpx;
			}

			.line {
				width: 2rpx;
				height: 30rpx;
				background-color: #ccc;
				margin-left: 12rpx;
			}
		}

		&-all {
			font-size: 24rpx;
			color: #999;
			margin-left: 12rpx;
		}

		&-tags {
			flex: 1;
			display: flex;
			flex-wrap: wrap;

			&-item {
				border: 2rpx solid #cccccc;
				padding: 0 4rpx 2rpx 8rpx;
				color: #666;
				border-radius: 4rpx;
				margin: 10rpx;
				font-size: 24rpx;

				image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}
}
</style>
